<template>
  <div>
    <el-row class="row">
      <el-col :span="4">
        <!-- 树形菜单 -->
        <el-tree :data="treeData"
                 :props="defaultProps"
                 :filter-node-method="filterNode"
                 default-expand-all
                 ref="tree"
                 @node-click="handleNodeClick"></el-tree>

      </el-col>
      <el-col :span="8">
        <div>
          <el-button @click="addCar"
                     :disabled="disabled">添加内转车</el-button>
          <el-button @click="handleRemove"
                     :disabled="disabled">删除</el-button>
        </div>
        <el-table :data="data"
                  class="row"
                  border
                  stripe
                  @selection-change="handleSelectionChange"
                  max-height="550">
          <el-table-column type="selection"
                           width="50"></el-table-column>
          <el-table-column prop="carTeam"
                           label="车队"
                           min-width="100"></el-table-column>
          <el-table-column prop="carNo"
                           label="内转车号"
                           min-width="100"></el-table-column>
          <el-table-column prop="status"
                           label="作业状态"
                           min-width="100">
            <template slot-scope="scope">
              {{ scope.row.status | _filterCheckStatus }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 添加内转车 -->
    <add-car-form ref="addCarForm"
                  :jobPurpose="jobPurpose"
                  @load="loadData"></add-car-form>
  </div>
</template>

<script>
import { getInternalCarPool, deleteInternalCarPool } from '@/api/accept/car'
import { getJobVehicleList } from '@/api/baseResource/baseResource'
import addCarForm from './addCarForm'

export default {
  name: 'interchangeDispatchCom',
  components: { addCarForm },
  data() {
    return {
      orgId: '',
      orgId:
        this.$store.state.user.currentUser.org &&
        this.$store.state.user.currentUser.org.id,
      orgName:
        this.$store.state.user.currentUser.org &&
        this.$store.state.user.currentUser.org.name,
      condition: {},
      disabled: true,
      data: [],
      treeData: [
        {
          label: '业务类型',
          children: [
            {
              label: '专线入库',
              jobPurpose: 'ZXRK'
            },
            {
              label: '专线出库',
              jobPurpose: 'ZXCK'
            },
            {
              label: '专线对交',
              jobPurpose: 'ZXDJ'
            },
            {
              label: '水运入库',
              jobPurpose: 'SYRK'
            },
            {
              label: '水运出库',
              jobPurpose: 'SYCK'
            },
            {
              label: '水运对交',
              jobPurpose: 'SYDJ'
            },
            {
              label: '加工出库',
              jobPurpose: 'JGCK'
            },
            {
              label: '成品入库',
              jobPurpose: 'CPRK'
            },
            {
              label: '成品出库',
              jobPurpose: 'CPCK'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      jobPurpose: '',
      dialogTableVisible: false,
      multipleSelection: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {},
  methods: {
    loadData() {
      getInternalCarPool({ search_EQ_jobPurpose: this.jobPurpose }).then(
        res => {
          this.data = res.data.aaData
        }
      )
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    //点击左边出现右边表格
    handleNodeClick(data) {
      if (data.jobPurpose) {
        this.disabled = false //添加内转车可点击
        getInternalCarPool({ search_EQ_jobPurpose: data.jobPurpose }).then(
          res => {
            this.data = res.data.aaData
            this.jobPurpose = data.jobPurpose
          }
        )
      }
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //添加内转车
    addCar() {
      this.$refs.addCarForm.dialogForm = true
    },
    //删除
    handleRemove() {
      if (this.multipleSelection.length === 0) {
        this.$message({ message: '请至少选择一条数据!', type: 'error' })
      } else {
        this.$confirm(`是否删除该数据?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.multipleSelection.forEach(item => {
              deleteInternalCarPool(item.id).then(res => {
                this.$message({
                  type: 'success',
                  message: `删除成功!`
                })
                this.loadData()
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      }
    }
  }
}
</script>
<style scoped>
.row {
  margin-top: 20px;
}
</style>



